<template>
  <div style="width: 1200px;margin: 0 auto">

    <div class="banner">
      <el-row :gutter="10" v-for="item in arr">
        <el-col :span="8">
          <table style="border: white 5px solid;margin: 60px 0 0 50px">
            <img :src="item.imgUrl" >
          </table>

        </el-col>
        <el-col :span="8">
          <div style="margin: 40px 0 0 0">
            <p style="font-size: 26px">{{ item.cinema }}</p>
            <p style="font-size: 14px">{{ item.address }}</p>
            <p style="font-size: 14px">电话:&nbsp&nbsp{{ item.phone }}</p>
          </div>

          <div class="features-group">
            <div class="group-title">
              影院服务

            </div>
            <div class="feature">
              <span class="tag">改签</span>
              <p class="test-ellipsis" title="未取票用户放映前60分钟可改签">未取票用户放映前60分钟可改签</p>
            </div>

            <div class="feature">
              <span class="tag">3D眼免押金</span>
              <p class="test-ellipsis" title="免押金">免押金</p>
            </div>
            <div class="feature">
              <span class="tag">儿童优惠</span>
              <p class="test-ellipsis" title="1.3以下（不含1.3m）儿童观看2D电影免票无座，需大人陪同">1.3以下（不含1.3m）儿童观看2D电影免票无座，需大人陪同</p>
            </div>
            <div class="feature">
              <span class="tag">情侣座</span>
              <p class="test-ellipsis" title="4.5.6.7厅含有情侣座">4.5.6.7厅含有情侣座</p>
            </div>
          </div>

        </el-col>
        <el-col :span="8">
          <p>评分</p>
        </el-col>
      </el-row>
    </div>

    <div style="margin-top: 70px;">
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item to="/">星辰电影</el-breadcrumb-item>
          <el-breadcrumb-item to="/cinemas">影院</el-breadcrumb-item>
          <el-breadcrumb-item>SFC上影国际影城（星悦荟店）</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div style="margin-top: 50px ;color: #509fc9;position: relative">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="item in 2" :key="item">
          <div style="margin: 50px 0 0 30px">
            <el-row :gutter="0">
              <el-col :span="4">
                <img src="/imgs/img.png" alt="" style="width: 152px;height: 186px" class="enlarge-image" >
              </el-col>
              <el-col :span="4">
                <img src="/imgs/img.png" alt="" style="width: 152px;height: 186px" class="enlarge-image">
              </el-col>
              <el-col :span="4">
                <img src="/imgs/img.png" alt="" style="width: 152px;height: 186px" class="enlarge-image">
              </el-col>
              <el-col :span="4">
                <img src="/imgs/img.png" alt="" style="width: 152px;height: 186px" class="enlarge-image">
              </el-col>
              <el-col :span="4">
                <img src="/imgs/img.png" alt="" style="width: 152px;height: 186px" class="enlarge-image">
              </el-col>
              <el-col :span="4">
                <img src="/imgs/img.png" alt="" style="width: 152px;height: 186px" class="enlarge-image">
              </el-col>

            </el-row>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="movie-info" v-for="movies in movie">
      <el-row gutter="30">
        <el-col span="12" style="font-size: 35px">{{ movies.title }}</el-col>
        <el-col span="12" style="color:green;font-size: 20px;margin-top: 15px">{{ movies.score }}分</el-col>
      </el-row>

      <div style="margin: 20px 0;width: 600px">
        <el-row gutter="0">
          <el-col :span="8">
            <span style="color: #999999">时长:&nbsp&nbsp</span>
            <span>{{ movies.time }}分钟</span>
          </el-col>
          <el-col :span="8">
          <span style="color: #999999">
            类型:&nbsp&nbsp
          </span>
            <span>
            <router-link to="" style="color: black">
              {{ movies.type }}
            </router-link>
            </span>
          </el-col>
          <el-col :span="8">
            <span style="color: #999999">主演:&nbsp&nbsp</span>
            <span>{{ movies.starring }}</span>
          </el-col>
        </el-row>
      </div>
    </div>

    <div style="">
      <div>
        <span style="color: #999999">观影时间 :</span>
        &nbsp&nbsp&nbsp&nbsp;
        <spqn>
          <el-button type="danger" round>今天 11月6</el-button>
          <el-button type="danger" round>明天 11月7</el-button>
        </spqn>
      </div>
    </div>

    <div class="plist-container">
      <table class="plist">
        <thead>
        <tr>
          <th>放映时间</th>
          <th>语言版本</th>
          <th>放映厅</th>
          <th>售价(元)</th>
          <th>选座购票</th>
        </tr>
        </thead>
      <tbody>
        <tr>
          <td>
            <span class="begin-time">14:25</span>
            <br>
            <span class="end-time">16:10散场</span>
          </td>
          <td>
            <span class="lang">中文</span>
          </td>
          <td>
            <span class="lang">6号RGB激光厅(最后一排双人沙发)</span>
          </td>
          <td>
            <span class="sell-price">30</span>
          </td>
          <td>
            <el-button type="danger" round>
              选座购票
            </el-button>
          </td>
        </tr>
      </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";

const arr = ref([
  {
    "imgUrl": "/imgs/yy.png",
    "cinema": "SFC上影国际影城（星悦荟店）",
    "address": "青秀区高坡岭路3号星悦荟第4F层01号商铺",
    "phone": "10086-10011",
    "score": "评分"
  }
])

const movie = ref([{
  "title": "拯救嫌疑人",
  "score": "9.3",
  "time": "118",
  "type": "悬疑",
  "starring": "张小斐 李鸿其 惠英红"
}])
</script>

<style>
td{
  text-align: center;
}
table {
  display: table;
  border-collapse: separate;
  box-sizing: border-box;
  text-indent: initial;
  border-spacing: 2px;
  border-color: gray;
}

.sell-price {
  font-size: 18px;
  color: #f03d37;
  font-weight: 700;
}
.lang {
  font-size: 14px;
  color: #333;
}
.end-time {
  font-size: 12px;
  color: #999;
}
.begin-time {
  font-size: 18px;
  color: #333;
  font-weight: 700;
}
tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}
.plist {
  width: 100%;
  border: none;
  border-spacing: 0;
}
.plist-container {
  display: block;
  margin-top: 30px;
}

.movie-info {
  border-bottom: 1px solid #e5e5e5;
  width: 1200px;
  margin: 40px auto;
}

.banner {
  width: 1200px;
  height: 330px;
  background-color: #509fc9;
  margin: 0 auto;
}

p {
  color: white;
  padding: 0;
  margin: 0;
  padding-top: 10px;
}

.features-group {
  width: 410px;
  height: 130px;
  position: relative;
  margin-top: 20px;
}

.group-title {
  font-size: 14px;
  margin-bottom: 5px;
  overflow: hidden;
  width: 410px;
}

.group-title hr {
  border: none; /* 取消默认边框 */
  border-top: 2px solid #ccc; /* 设置上边框为实线灰色 */
  margin: 10px 0; /* 设置上下外边距 */
}

.tag {
  display: inline-block;
  border: 1px solid hsla(0, 0%, 100%, .6);
  border-radius: 2px;
  min-width: 60px;
  height: 22px;
  line-height: 23px;
  text-align: center;
  font-size: 13px;
  color: white;
}

.test-ellipsis {
  display: inline-block;
  max-width: 438px;
  font-size: 10px;
  vertical-align: middle;
  margin: 0 0 10px 10px;
  color: white;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.enlarge-image {
  transition: transform 0.3s ease;
}

.enlarge-image:hover {
  transform: scale(1.2);
}
</style>